<template>
	<view class="navbar-container">
		<view class="navbar-top">
			<!-- 动态状态栏占位 -->
			<view :style="{ height: statusBarHeight }"></view>
			<view
				class="navbar-content"
				:style="{ height: searchHeight, marginRight: navbarContentRight }"
				@click="goSearchPage"
			>
				<uni-icons type="search" color="#999"></uni-icons>
				<view class="navbar-search-txt">
					输入文章标题进行搜索
				</view>
			</view>
		</view>
		<view :style="{ height: parseInt(searchHeight) + parseInt(statusBarHeight) + 20 + 'rpx'}">
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"NavBar",
		
		created() {
			this.getSystemInfo();
		},
		
		computed: {
			// statusBarHeight() {
			// 	return `${this.}`
			// }
		},
		
		data() {
			return {
				statusBarHeight: "20rpx",
				searchHeight: "60rpx",
				navbarContentRight: ""
			};
		},
		
		methods: {
			goSearchPage() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res)=> {
						const { statusBarHeight } = res;
						statusBarHeight && (this.statusBarHeight = `${statusBarHeight * 2}rpx`)
						// #ifdef MP-WEIXIN
							// 获取胶囊上下文
							const menuButton = uni.getMenuButtonBoundingClientRect();
							this.statusBarHeight = menuButton.top * 2 - 4 + 'rpx';
							this.searchHeight = menuButton.height * 2 + 'rpx';
							this.navbarContentRight = menuButton.width * 2 + 'rpx';
							console.log(menuButton);
						// #endif
						console.log("res", this.statusBarHeight)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "./css/navbar.scss";
</style>